<template>
  <div class="configPanel">
    <el-drawer title="配置项" :visible.sync="isShow" direction="rtl" @close="handleClose" append-to-body>

      <div class="contentBox">
        <div class="formBox">
          <!-- {{currentTargetNodePortId}} -->
          <el-form :model="ruleForm" ref="ruleForm" label-width="70px">
            <div v-for="(item, index) in ruleForm.list" :key="index" class="configItem">
              <div class="titleBox">
                <div class="title">配置{{index + 1}}</div>
                <div class="btnBox">
                  <el-button size="mini" plain type="success" icon="el-icon-plus" @click="addClick(index)">新增</el-button>
                  <el-button v-if="ruleForm.list.length > 1" size="mini" plain type="danger" icon="el-icon-delete" @click="delClick(index)">删除</el-button>
                </div>
              </div>
              <el-form-item label="返回值" :prop="`list.${index}.outFieldFormula`" :rules="rules.outFieldFormula">
                <Treeselect v-model="item.outFieldFormula" :options="outFieldFormulaList" :normalizer="normalizer" placeholder="选择返回值"></Treeselect>
              </el-form-item>
              <el-form-item label="类型" :prop="`list.${index}.matchingType`" :rules="rules.matchingType">
                <el-select v-model="item.matchingType" placeholder="请选择类型" style="width: 100%">
                  <el-option label="正则" value="1"></el-option>
                  <el-option label="比较" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="比较值" :prop="`list.${index}.matchingValue`" :rules="rules.matchingValue">
                <el-input v-model="item.matchingValue" placeholder="请输入比较值"></el-input>
              </el-form-item>
              <el-form-item label="区间值" :prop="`list.${index}.compareFlag`" :rules="rules.compareFlag" v-if="item.matchingType === '2'">
                <el-select v-model="item.compareFlag" placeholder="请选择区间值" style="width: 100%">
                  <el-option label="=" value="="></el-option>
                  <el-option label=">" value=">"></el-option>
                  <el-option label="<" value="<"></el-option>
                  <el-option label=">=" value=">="></el-option>
                  <el-option label="<=" value="<="></el-option>
                  <el-option label="in" value="in"></el-option>
                  <el-option label="not in" value="not in"></el-option>
                  <el-option label="<>" value="<>"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="btnFoot">
          <div class="btnBox">
            <el-button @click="closeClick">取消</el-button>
            <el-button type="primary" @click="saveConfig">保存</el-button>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { listExcPortConfig } from '@/api/pm/excPortConfig'
import { listToTreeAll, treeSetValue, findIndexArray } from '@/utils'
// import { treeDataTest } from '../data'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'configPanel',

  components: { Treeselect },
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    configData: {
      type: Array,
      default: () => []
    },
    currentTargetNodePortId: {
      type: String,
      default: '111'
    }
  },
  data() {
    return {
      isShow: false,
      ruleForm: {
        list: []
      },
      rules: {
        outFieldFormula: [{ required: true, message: '不能为空', trigger: 'change' }],
        matchingValue: [{ required: true, message: '不能为空', trigger: 'blur' }],
        matchingType: [{ required: true, message: '不能为空', trigger: 'change' }],
        compareFlag: [{ required: true, message: '不能为空', trigger: 'change' }]
      },
      outFieldFormulaList: []
    }
  },
  computed: {},
  watch: {
    drawer(val) {
      this.isShow = val
      if (val) {
        this.ruleForm.list = this.configData || [this.ruleFormInit()]
        setTimeout(() => {
          this.$refs.ruleForm.clearValidate()
        })
        this._listExcPortConfig()
      }
    }
  },
  mounted() {},
  methods: {
    ruleFormInit() {
      return {
        outFieldFormula: undefined,
        matchingValue: '',
        matchingType: '',
        compareFlag: ''
      }
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      return {
        id: node.value,
        label: node.field,
        children: node.children
      }
    },
    handleClose() {
      this.$emit('update:drawer', false)
    },
    addClick(index) {
      this.ruleForm.list.splice(index + 1, 0, this.ruleFormInit())
      // 清除校验
      this.$refs.ruleForm.clearValidate()
    },
    delClick(index) {
      this.ruleForm.list.splice(index, 1)
    },
    saveConfig() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('saveConfig', this.ruleForm.list)
          // console.log(this.ruleForm.list, '==this.ruleForm.list==')
          this.handleClose()
        } else {
          // console.log('error submit!!')
          return false
        }
      })
    },
    closeClick() {
      this.handleClose()
    },
    // 返回值下拉请求
    async _listExcPortConfig() {
      const param = {
        pageNum: 1,
        pageSize: 1000,
        portId: this.currentTargetNodePortId,
        // portId: '352509475221225472',
        type: '2'
      }
      const res = await listExcPortConfig(param)
      if (res) {
        const treeData = listToTreeAll(res.rows, 'id', 'parentId')
        this.outFieldFormulaList = treeSetValue(treeData)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contentBox {
  padding: 10px;
  .formBox {
    height: calc(100vh - 150px);
    margin-bottom: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    .titleBox {
      display: flex;
      .title {
        font-weight: bold;
        padding: 0 0px 20px 10px;
        line-height: 28px;
      }
      .btnBox {
        margin-left: 20px;
      }
    }
    .configItem {
      padding-bottom: 10px;
    }
  }
  .btnFoot {
    display: flex;
    .btnBox {
      margin-left: auto;
    }
  }
}
</style>
